<!-- wyf 2022-3-28 -->
<template>
  <a-page-header
    :avatar="avatar"
    :back-icon="backIcon"
    :breadcrumb="breadcrumb"
    :extra="extra"
    :footer="footer"
    :ghost="ghost"
    :sub-title="subTitle"
    :tags="tags"
    :title="title"
    @back="back"
  >
    <template v-if="$slots.backIcon" #backIcon>
      <slot name="backIcon" />
    </template>
    <template v-if="$slots.extra" #extra>
      <slot name="extra" />
    </template>
    <template v-if="$slots.footer" #footer>
      <slot name="footer" />
    </template>
    <template v-if="$slots.subTitle" #subTitle>
      <slot name="subTitle" />
    </template>
    <template v-if="$slots.title" #title>
      <slot name="title" />
    </template>
    <slot />
  </a-page-header>
</template>

<script>
import { defineComponent } from 'vue'
import { PageHeader } from 'ant-design-vue'
export default defineComponent({
  name: 'ZPageHeader',
  components: {
    APageHeader: PageHeader
  },
  props: {
    avatar: {
      type: Object,
      default: undefined
    },
    backIcon: {
      type: String,
      default: undefined
    },
    breadcrumb: {
      type: Object,
      default: undefined
    },
    extra: {
      type: String,
      default: undefined
    },
    footer: {
      type: String,
      default: undefined
    },
    ghost: {
      type: Boolean,
      default: true
    },
    subTitle: {
      type: String,
      default: undefined
    },
    tags: {
      type: [Object, Array],
      default: undefined
    },
    title: {
      type: String,
      default: undefined
    }
  },
  setup(props, context) {
    const back = (e) => {
      context.emit('back', e)
    }
    return {
      back
    }
  }
})
</script>
